<template>
    <div class="selecter" v-if="showExCode">
        
        <div class="bg" @click="$emit('update:showExCode',false)">
			<div class="store-list" @click.stop="">
				<div class="title">店铺选择</div>
				<div class="search-words">
					<el-input class="search-form search-words-input" v-model="searchContent.storeName" placeholder="请输入店铺名称"></el-input>
					<el-input class="search-form search-words-input" v-model="searchContent.redeemCode" placeholder="兑换码"></el-input>
					<el-date-picker
						class="search-form"
						v-model="searchContent.endDate"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="过期时间"
					></el-date-picker>
					<el-select class="search-form select" :popper-append-to-body="false" v-model="searchContent.typeId" placeholder="状态">
						<el-option label="未使用" value="0"></el-option>
						<el-option label="已使用" value="1"></el-option>
						<el-option label="已退单" value="2"></el-option>
					</el-select>
					<el-button	class="search-form" type="primary" @click="search">搜索</el-button>
					<el-button	class="search-form" type="primary"  @click="reset">重置</el-button>
				</div>
				<div class="search-store-list">
				<el-table :data="storeList" border height="300" class="storeTable">
						<el-table-column
								align="center"
								prop="store_name"
								label="店铺名称"
								min-width="120">
						</el-table-column>
						<el-table-column
								align="center"
								prop="code"
								label="兑换码"
								min-width="120">
						</el-table-column>
						<el-table-column
								align="center"
								prop="enddate"
								label="截止有效日期"
								min-width="120">
						</el-table-column>
						<el-table-column
								align="center"
								prop="enddate"
								label="录入方式"
								min-width="120"
								#default="{ row }">
								{{row.classid==1?'表格导入':'平台发布'}}
						</el-table-column>
						<el-table-column
								align="center"
								prop="storeStatus"
								label="状态"
								min-width="120"
								#default="{ row }">
								<span :class="`color-${row.type}`">
									{{
										row.type == 1 ? 
											'已使用' : 
											(row.type == 2 ? '已退单' : '未使用')
									}}
								</span>
						</el-table-column>
					</el-table>
				</div>
				<div class="paginationOne page">
					<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="searchContent.currentPage"
							:page-sizes="[10, 20, 50, 100]"
							:page-size="searchContent.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total">
					</el-pagination>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
    export default {
		name: "storeList",
		props: {
			showExCode:{
				required:true,
				type: Boolean,
			}
		},
		data(){
			return{
                total:0,
				searchContent: {
					currentPage: 1,
                    pageSize: 10,
                    storeName:'',
                    redeemCode:'',
                    endDate:'',
                    typeId:'',
				},
				storeList:[],
				check:[],
				pgoods_id:''
			}
		},
		mounted(){
            // console.log(this.$store.state)
        },
        methods:{
			stop(){},
			init(id,classId){
				this.pgoods_id = id;
				this.classId = classId;
				this.getStoreList(id,classId);
			},
			selectMore(){
				this.$emit("chooseStore",this.check);
				this.$emit('update:showExCode',false);
			},
            getStoreList(id,classId){
                const data = {};
				data.page = this.searchContent.currentPage;
                data.pageSize = this.searchContent.pageSize;
                data.classId = classId;
                data.proId = id;
                data.storeName = this.searchContent.storeName;
                data.endDate = this.searchContent.endDate;
                data.typeId = this.searchContent.typeId;
                data.redeemCode = this.searchContent.redeemCode;
                this.$http.post('/admin/pointprod/index.php?act=pointGoods&op=storeRedeem', data).then(res => {
                    if (res.code == 1) {
                        if (res.data && res.data.list.length) {
							this.storeList = res.data.list
                            this.total = parseInt(res.data.totalCount);
                        } else {
                            this.storeList = [];
                            this.total = 0;
                        }
                    }
                    else if (res.code == 2001) {
                        this.storeList = [];
                        this.total = 0;
                    }
                    else {
						this.storeList = [];
                        this.total = 0;
                        this._message(res.msg);
                    }
                })
            },
			search() {
				this.searchContent.currentPage = 1;
				this.getStoreList(this.pgoods_id,this.classId);
			},
			reset() {
				this.searchContent = {
					currentPage: 1,
                    pageSize: 10,
                    storeName:'',
                    redeemCode:'',
                    endDate:'',
                    typeId:'',
				}
				this.getStoreList(this.pgoods_id,this.classId);
			},
			handleSizeChange(pageSize) {
				this.searchContent.pageSize = pageSize;
				this.searchContent.currentPage = 1;
				this.getStoreList(this.pgoods_id,this.classId);
			},
			handleCurrentChange(page) {
				this.searchContent.currentPage = page;
				this.getStoreList(this.pgoods_id,this.classId);
            },
            storeStatus(status){
                switch (status) {
                    case '0':
                        return "关闭";
                        break;
                    case '1':
                        return "开启";
                        break;
                }
            },
            storeLevel(level){
                switch (level) {
                    case '1':
                        return "默认店铺";
                        break;
                    case '2':
                        return "白金店铺";
                        break;
                }
            }
        },
        created(){
            // this.getStoreList();
        }
		
    }
</script>

<style lang="scss" scoped>

.store-list{
	position: absolute;
	width: 800px;
	height: 500px;
	margin: 0 auto;
    top: 20%;
    left: 30%;
    // z-index: 9999;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    .title{
        font-size: 18px;
        text-align: center;
        margin-bottom: 15px;
    }
	.search-words{
        margin-bottom: 10px;
		.search-words-input{
			width: 200px;
            margin: 0 5px;
		}
	}
	.search-store-list{
		width: 100%;
	}
    .page{
        position: absolute;
        bottom: 5px;
        left:0;
    }
    
}

.bg{
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    z-index: 9998;
}
.paginationOne{
	width: 100%;
	box-sizing: border-box;
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.search-form{
	margin-bottom:10px;
}
button{
	margin-left: 10px;
}
.search-form.select{
	margin:0 5px;
}
.el-table__row span.color-2 {
	color: #F56C6C;
}
.el-table__row span.color-0 {
	color: #67C23A;
}
</style>